<template>
    <div class="box_alarm">
        <MoodalTitle :title="'环卫设施分析'" />
        <div class="flax">
            <!-- 左 -->
            <div class="box_left">
                <p class="box_wc"><span>公厕信息: <i style="font-size: 2rem; margin-left: 1rem;">{{form.NumberOfPublicToilets}}个</i></span></p>
            </div>
            <!-- 右 -->
            <div class="box_r">
                <p class="box_wc"><span>中转站: <i style="font-size: 2rem; margin-left: 1rem;">{{form.NumberOfTransferStation}}个</i></span></p>
            </div>
            <!-- 下 -->
            <div class="box_b">
                <p class="box_dl"><span>道路: <i style="font-size: 2rem; margin-left: 1rem;">{{form.NumberOfRoad}}个</i></span></p>
            </div>
        </div>
    </div>
</template>
<script>
import {ZongHeZhztaDB} from '@/api/zhangzi/index'
import MoodalTitle from '@/components/ModalTitle/Index.vue'
export default {
    components: { MoodalTitle },
    data() {
        return {
            form:{}
        }
    },
    mounted(){
        this.getZhztaLst()
    },
    methods:{
        // 环卫设施分析
         getZhztaLst() {
            ZongHeZhztaDB.getWcFacilities().then(res =>{
                console.log(res,'环卫设施分析');
                if(res.code == 200){
                    this.form = res.data
                }
            })
    }
}
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 37.4rem !important;
    margin-bottom: 1.9rem;
}

.flax {
    position: relative;
}

.box_left {
    width:  34.9rem;
    height: 13.3rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/beta2.png) no-repeat;
    background-size: cover;
}

.box_r {
    position: absolute;
    right: 0;
    top:  10rem;
    width:  34.9rem;
    height: 13.3rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/station2.png) no-repeat;
    background-size: cover;
}

.box_b {
    // float: right;
    position: absolute;
    left: 0;
    bottom: -19.4rem;
    width:  34.9rem;
    height: 13.3rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/road2.png) no-repeat;
    background-size: cover;
}
.box_wc{
    position: absolute;
    left: 39%;
    top: 44%;
    transform: translate(-50%,-50%);
    font-size: 1.6rem;
    color: #fff;
}
.box_dl{
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%,-50%);
    font-size: 1.6rem;
    color: #fff;
}
</style>